<template>  
  <div class="main-control">
      <tab-control :titles='["流行" , "新款" , "精选"]' class="control" @tabClick="tabClick" />
      <goods-list v-if="0 === showIndex" :goods="goods['pop'].list" />
      <goods-list v-else-if="1 === showIndex" :goods="goods['new'].list" />
      <goods-list v-else-if="2 === showIndex" :goods="goods['sell'].list" />
  </div>
</template>



<script>
  import TabControl from "components/common/TabControl/TabControl"
  import GoodsList from "components/common/goods/GoodsList"

  import { getHomeGoods } from "network/home"


    export default {
    name: 'MainControl',
    components:{
      TabControl,
      GoodsList
    },
    data(){
      return {
        goods: {
          "pop"   :{ page : 0 , list : [] },
          "new"   :{ page : 0 , list : [] },
          "sell"  :{ page : 0 , list : [] }
        },
        showIndex : 0
      }
    },
    created() {
      this.getHomeGood('pop')
      this.getHomeGood('new')
      this.getHomeGood('sell')
    },
    methods:{
      tabClick(i){
        this.showIndex = i
        this.$emit("setIndex",i)
      },


      getHomeGood(type){
        getHomeGoods(type , this.goods[type].page + 1 ).then(res => {
          this.goods[type].list.push(...res.data.data.list)
          this.goods[type].page +=1;
        })
      }
    }
  }
</script>

<style scoped>
  .control {
    background-color: white;
    z-index: 1;
  }
</style>